<template>
  <div :class="datas._type" class="event-info">
    <div class="title-wrap">
      <div class="title-wrap-left">
        <div class="title-box">
          <div class="title">
            {{ datas._title }}
          </div>
          <div v-if="datas._tag" :class="datas._tag.type" class="tag" :style="{background:datas._tag.back}">
            {{ datas._tag.text }}
          </div>
        </div>
      </div>
      <div v-if="datas._hexagon" :class="datas._hexagon.type" class="hexagon">
        {{ datas._hexagon.text }}
      </div>
    </div>
    <div class="infos">
      <template
          v-for="(infoItem, infoItemIndex) in columns"
          :key="infoItemIndex"
      >
        <div v-if="infoItem.type === 'image'" class="info-item-image">
          <div class="title">
            {{ infoItem.title }}
          </div>
          <div
              :style="{
              backgroundImage: `url(${datas[infoItem.name]})`,
              width: `${infoItem.width}px`,
              height: `${infoItem.height}px`,
            }"
              class="image"
          />
        </div>
        <div v-else class="info-item">
          <div class="title">
            {{ infoItem.title }}
          </div>
          <div class="info-box" :class="{singleBox:infoItem.single,arrowColor:infoItem.arrowColor}">
            <div
                :class="{single:infoItem.single}"
                :title="infoItem.single?datas[infoItem.name]:''"
                class="info"
            >
              {{ datas[infoItem.name] }}
            </div>
            <div v-if="infoItem.arrow" class="arrow" @click="$emit('arrow', datas)">
              &#62;&#62;
            </div>
          </div>
        </div>
      </template>
      <div v-if="datas._buttons" class="btn-box">
        <div
            v-for="(item, index) in datas._buttons"
            :key="index"
            :class="item.type"
            :disable="item.disable"
            class="btn-item"
            @click="item.dis?'':$emit('button', index)"
        >
          {{ item.title }}
        </div>
      </div>
      <div
          v-if="datas._image"
          :style="{
          backgroundImage: `url(${datas._image.url})`,
          width: `${datas._image.width}px`,
          height: `${datas._image.height}px`,
        }"
          class="image-box"
      />
    </div>
  </div>
</template>

<script setup>
// eslint-disable-next-line no-undef
defineProps({
  columns: {
    type: Array,
    default: () => [],
  },
  datas: {
    type: Object,
    default: () => ({}),
  },
});

// eslint-disable-next-line no-undef
defineEmits(["button", "arrow"]);
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
